<template>
  <transition name="el-zoom-in-center">
    <div class="JNPF-preview-main">
      <div class="JNPF-common-page-header">
        <el-page-header @back="goBack" content="新建流程" />
        <div class="options">
          <el-button @click="goBack()">{{$t('common.cancelButton')}}</el-button>
        </div>
      </div>
      <div class="main">
        <div class="flowList">
          <div class="item" v-for="(item,i) in categoryList" :key="i">
            <p class="cap">{{item.fullName}}【{{count}}】</p>
            <div class="iconList">


              <!-- 禄口油库 -->
              <div class="iconbox"  v-for="(child) in listlkyk" :key="child.id" @click="jump(child)">
                <div class="box-icon" v-if="childShow" :style="{backgroundColor:child.iconBackground||'#008cff'}">
                  <i :class="child.icon"></i>
                </div>
                <p v-if="childShow" class="box-title">{{child.fullName}}</p>


                <!-- <div class="iconbox"  v-for="(child,i) in item.children" :key="i" @click="jump(child)">
                <div class="box-icon" :style="{backgroundColor:child.iconBackground||'#008cff'}">
                  <i :class="child.icon"></i>
                </div>
                <p  class="box-title">{{child.fullName}}</p> -->
                
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>

export default {
  data() {
    return {
      categoryList: [],
      childShow: false,
      count:0,
      listlkyk:[], // 禄口油库
    }
  },
  methods: {
    goBack() {
      this.$emit('close')
    },
    init(categoryList) {
      this.categoryList = categoryList.filter(o => o.children.length)
      //  作业票管理数据渲染
      let userInfo = this.$store.state.user.userInfoPer.departmentName    // 当前登录人单位名称
      if(userInfo.indexOf('管道中心') != -1 === false && userInfo.indexOf('禄口油库') != -1 === false && userInfo.indexOf('航空加油站') != -1 === false && userInfo.indexOf('机坪车辆加油站') != -1 === false) {
        // 用户无权限访问
        const h = this.$createElement;
        this.$message({
            message: h('p', null, [
              h('span', null, '当前用户无权限访问'),
            h('i', { style: 'color: teal' }, '作业票管理') 
          ])
        });
      }
      let list = []        // 存放相关部门数据
      let listData = []    // 存放吊装安全作业证数据
      categoryList[0].children.forEach(element => {
        let name =  element.fullName.split(',');    // 获取fullName进行拆分，获取所有作业票
        name.forEach(item =>　{
          if(userInfo.indexOf('管道中心') != -1  || userInfo.indexOf('禄口油库') != -1  || userInfo.indexOf('航空加油站') != -1 || userInfo.indexOf('机坪车辆加油站') != -1) {
            if(item.indexOf('吊装安全作业证') != -1) listData.push(element)
            if( item.indexOf(userInfo) != -1 == true)  list.push(element), this.childShow = true
          } 
        })
      });
      this.listlkyk = list.concat(listData)   // 合并数据
      this.count = this.listlkyk.length
    },
    jump(item) {
      this.$store.commit('generator/ITEM_DATA',item)
      if (!item.enCode) {
        this.$message({
          type: 'error',
          message: '流程不存在'
        });
        return
      }
      this.$emit('chioceFlow', item)
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  padding: 10px 0 0;
  color: #606266;
  .flowList {
    margin: 16px;
    .cap {
      font-size: 14px;
      margin-bottom: 6px;
    }
    .item {
      &::after {
        content: '';
        display: block;
        clear: both;
      }
    }
    .iconbox {
      cursor: pointer;
      width: 100px;
      height: 120px;
      overflow: hidden;
      float: left;
      margin: 10px;
      margin-left: 0px;
      margin-bottom: 20px;
      &:hover {
        opacity: 0.8;
        .iconbox:hover .box-icon {
          box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.1);
        }
      }
      .box-icon {
        width: 50px;
        height: 50px;
        border-radius: 12px;
        text-align: center;
        margin: 0 auto;
        margin-top: 10px;
        margin-bottom: 10px;
        background-color: #ccc;
        i {
          text-align: center;
          font-size: 38px;
          color: #fff;
          line-height: 50px;
        }
      }
      .box-title {
        text-align: center;
        font-size: 12px;
      }
    }
  }
}
</style>